<template>
  <div class="wrapper">
    <div class="btn">
      <slot name="button"></slot>
    </div>
    <div v-if="!show" class="block" @click="toggle(true)">
      <span class="iconfont icon-shaixuan icon"></span>
      <span>筛选</span>
    </div>
    <div v-else class="block" @click="toggle(false)">
      <span class="iconfont icon-shouqi icon"></span>
      <span>收起</span>
    </div>
  </div>

  <div v-show="show" ref="newDom" :style="{ width: show ? '100%' : 'auto' }" class="block-test">
    <slot :show="show" name="search"></slot>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from "vue"

defineProps({
  btnValue: String
})

const show = ref(true)
const newDom = ref()
const emit = defineEmits(["searchBack"])
const toggle = async (isShow: boolean) => {
  show.value = isShow
  await nextTick()
  emit("searchBack")
}
</script>

<style lang="stylus" scoped>
.wrapper {
  cursor: pointer;
  position: relative;
  z-index: 22;
  box-sizing: border-box;
  width 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.block {
  padding: 0 10px;
  cursor: pointer;
}

.block-test {
  margin: 16px 0;
}

.icon {
  font-size: 16px;
  margin-right: 7px;
  cursor pointer
}
</style>
